<template>
  <common-page title="画像">
    <el-button slot="header" @click="$emit('close')">返回</el-button>
    <div class="execution-history-overview-wrap" slot="content" ref="ssessment">
      <div class="column-divided"></div>
      <div class="grid-column-1">
        <div class="chart-container-1" v-loading="loading1">
          <div class="user-info" v-if="islist">
            <div class="user-info-public-1">
              <div class="user-info-img">
                <img
                  src="../../../../assets/images/user-avatar.jpeg"
                  width="60px"
                  height="60px"
                />
              </div>
              <div class="user-info-data-1">
                <span class="user-info-data-name">{{ list.account }}</span
                ><span class="user-info-data-time"
                  >最后一次访问时间：{{ list.lastTime }}</span
                >
                <div class="user-info-data-2">
                  <div class="user-info-data-div">
                    <span class="user-info-data-form"
                      >用户：{{ list.nickName }}</span
                    ><span class="user-info-data-form"
                      >所属组织：{{ list.deptName }}</span
                    >
                  </div>
                  <div class="user-info-data-div">
                    <span
                      class="user-info-data-form"
                      style="cursor: pointer"
                      @click="detailClick('sourceIpStrList')"
                      >访问源IP：{{ list.sourceIpStr }}</span
                    ><span
                      class="user-info-data-form"
                      style="cursor: pointer"
                      @click="detailClick('targetIpStrList')"
                      >访问目标IP：{{ list.targetIpStr }}</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="user-info-public-2">
              <div
                class="user-info-exceptions"
                @click="detailClick('errorVisit')"
              >
                <span
                  ><i
                    class="iconfont icon-hot"
                    style="color: #fd0000; font-size: 22px"
                  ></i>
                  异常访问次数</span
                >
                <div>
                  <span style="font-size: 28px; color: #fd0000">{{
                    list.errorVisit
                  }}</span
                  ><span style="margin-left: 8px">次</span>
                </div>
              </div>
              <div class="test-border-line"></div>
              <div class="user-info-nums">
                <div
                  class="user-info-num"
                  style="padding-left: 0px"
                  @click="detailClick('interfaceNum')"
                >
                  <span class="user-info-num-title">访问接口数</span
                  ><span class="user-info-num-num">{{
                    list.interfaceNum
                  }}</span>
                </div>
                <div class="user-info-num-border"></div>
                <div class="user-info-num" @click="detailClick('ipNum')">
                  <span class="user-info-num-title">使用IP数</span
                  ><span class="user-info-num-num">{{ list.ipNum }}</span>
                </div>
                <div class="user-info-num-border"></div>
                <div class="user-info-num" @click="detailClick('totalVisit')">
                  <span class="user-info-num-title">访问次数</span
                  ><span class="user-info-num-num">{{ list.totalVisit }}</span>
                </div>
                <div class="user-info-num-border"></div>
                <div class="user-info-num" @click="detailClick('sensitiveNum')">
                  <span class="user-info-num-title">去重敏感数据</span
                  ><span class="user-info-num-num">{{ sensitiveNum }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="chart-tooltip" v-else>
            <commonIcon
              iconName="icon-wushuju"
              iconType="icon"
              :iconSize="36"
            ></commonIcon>
            <span class="tip-content">暂无数据</span>
          </div>
        </div>
        <div class="column-divided"></div>
        <div class="grid-column-2">
          <div class="chart-container" v-loading="loading2">
            <title-card title="访问时间热度">
              <base-chart
                slot="content"
                :option="dataset1"
                v-if="dataset1.dataset.source.length"
                @chartClick="chartClick($event, 'visitTime')"
              ></base-chart>
              <div class="chart-tooltip" v-else>
                <!--                  <i class="iconfont icon-wushuju"></i>-->
                <commonIcon
                  iconName="icon-wushuju"
                  iconType="icon"
                  :iconSize="36"
                ></commonIcon>
                <span class="tip-content">暂无数据</span>
              </div></title-card
            >
          </div>
          <div class="chart-container" v-loading="loading3">
            <title-chart
              type="chart-wordCloud"
              title="敏感数据分布"
              :dataset="dataset2"
              @chartClick="chartClick($event, 'sensitive')"
            ></title-chart>
          </div>
          <div class="chart-container" v-loading="loading4">
            <title-chart
              type="chart-bar"
              title="访问源IP分布"
              :dataset="dataset3"
              @chartClick="chartClick($event, 'visitIP')"
            ></title-chart>
          </div>
        </div>
        <div class="column-divided"></div>
        <div class="grid-column-1">
          <div class="chart-container-2" v-loading="loading5">
            <title-card title="接口访问轨迹">
              <common-timeline :data="timelist" v-if="this.timelist.length > 0">
              </common-timeline>
              <div class="chart-tooltip" v-else>
                <commonIcon
                  iconName="icon-wushuju"
                  iconType="icon"
                  :iconSize="36"
                ></commonIcon>
                <span class="tip-content">暂无数据</span>
              </div>
            </title-card>
          </div>
        </div>
      </div>
    </div>
    <drillDialog ref="AddDialog" :account="account"></drillDialog>
  </common-page>
</template>

<script>
import TitleChart from "@/components/EChart/TitleChart";
import commonIcon from "@/components/CommonIcon";
import BaseChart from "@/components/EChart/components/BaseChart";
import { formatNumber } from "@/utils/util";
import {
  getApiVisitAccountDataVisit,
  orgLigetApiVisitAccountDataIpst,
  getApiVisitAccountStatic,
  getApiVisitAccountDetail,
  getApiVisitSensitiveData,
  getApiVisitAccountSensitive,
} from "@/api/apisecurity/portrait/index";
import drillDialog from "./drillDialog";
export default {
  components: { TitleChart, commonIcon, BaseChart, drillDialog },
  computed: {},
  data() {
    return {
      loading1: false,
      loading2: false,
      loading3: false,
      loading5: false,
      loading4: false,
      list: {},
      islist: false,
      dataset1: {
        color: ["#39a5e1"],
        tooltip: {
          show: true,
          formatter: function (params) {
            return `${params.marker} ${params.value.visitTime}  ${params.value.visits}`;
          },
        },
        dataset: {
          dimensions: ["visitTime", "visits"],
          source: [],
        },
        grid: {
          right: 20,
          bottom: 50,
          top: 40,
        },
        xAxis: {
          show: true,
          type: "category",
          axisLine: {
            show: true,
          }, // 坐标轴线
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            rotate: -15,
            align: "center",
            margin: 20,
            interval: 2,
            show: true,
            width: 68,
          }, // 坐标轴标签
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          name: "单位： 次",
          nameGap: 22,
          type: "value",
          axisLine: {
            show: true,
          },
          axisTick: {
            show: false,
          }, // 坐标轴刻度
          axisLabel: {
            show: true,
          }, // 坐标轴标签
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            type: "bar",
            barMaxWidth: 20,
          },
        ],
      },

      dataset2: {
        dimensions: [],
        source: [],
      },
      dataset3: {
        dimensions: ["visitIp", "visits"],
        source: [],
        option: {
          color: ["#39a5e1"],
          yAxis: {
            name: "单位： 次",
            nameGap: 30,
          },
          xAxis: {
            show: true,
            type: "category",
            axisLine: {
              show: true,
            }, // 坐标轴线
            axisTick: {
              show: false,
            }, // 坐标轴刻度
            axisLabel: {
              rotate: -20,
              align: "left",
              margin: 10,
              interval: 0,
              show: true,
              width: 68,
              // overflow: "breakAll",
              // ellipsis: "...",
              formatter: function (value) {
                let tip = value.length > 10 ? "..." : "";
                return value.substring(0, 9) + tip;
              },
            }, // 坐标轴标签
            splitLine: {
              show: false,
            },
          },
        },
      },
      timelist: [],
      account: {},
      open: false,
      sensitiveNum: null,
    };
  },

  methods: {
    chartClick(row, type) {
      if (type === "visitTime") {
        this.$refs.AddDialog.show(type, row.name);
      }
      if (type === "sensitive") {
        this.$refs.AddDialog.show(type, row.name);
      }
      if (type === "visitIP") {
        this.$refs.AddDialog.show(type, row.name);
      }
    },
    detailClick(type) {
      this.$refs.AddDialog.show(type, this.list);
    },
    show(row) {
      this.account = row;

      this.getApiVisitAccountDataVisitList();
      this.orgLigetApiVisitAccountDataIpstList();
      this.getApiVisitAccountDetailList();
      this.getApiVisitAccountSensitiveList();

      this.loading1 = true;
      Promise.all([
        this.getApiVisitAccountStaticList(),
        this.getApiVisitSensitiveDataList(),
      ])
        .then((values) => {
          this.islist = true;
          this.list = values[0]?.data?.reduce((r, c) => {
            r = {
              account: c.account,
              totalVisit: formatNumber(c.totalVisit),
              lastTime: c.lastTime,
              sourceIpStr: c.sourceIpStr,
              errorVisit: formatNumber(c.errorVisit),
              nickName: c.nickName,
              deptName: c.deptName,
              ipNum: formatNumber(c.ipNum),
              interfaceNum: formatNumber(c.interfaceNum),
              targetIpStr: c.targetIpStr,
              sourceIps: c.sourceIps,
              targetIps: c.targetIps,
            };
            return r;
          }, {});
          this.sensitiveNum = formatNumber(values[1]?.data[0]?.sensitiveNum);
        })
        .finally(() => {
          this.loading1 = false;
        });
    },
    goBack() {
      this.$emit("close");
    },

    //去重敏感数
    getApiVisitSensitiveDataList() {
      return new Promise((resolve, reject) => {
        let account = {
          account: this.account.account,
          beginTime: this.account.beginTime,
          endTime: this.account.endTime,
        };
        getApiVisitSensitiveData(account).then((res) => {
          if (res && res.code === 200) {
            resolve(res);
          } else {
            reject();
            this.sensitiveNum = 0;
          }
        });
      });
    },
    // 敏感数据分布
    getApiVisitAccountSensitiveList() {
      this.loading3 = true;
      let account = {
        account: this.account.account,
        beginTime: this.account.beginTime,
        endTime: this.account.endTime,
      };
      getApiVisitAccountSensitive(account)
        .then((res) => {
          if (res && res.code === 200) {
            let sensitiveList = Object.entries(res.data[0].sensitiveMap);
            sensitiveList.map((itme) => {
              this.dataset2.source.push({ name: itme[0], value: itme[1] });
            });
          } else {
            this.dataset2.source = [];
          }
        })
        .finally(() => {
          this.loading3 = false;
        });
    },
    //访问时间热度
    getApiVisitAccountDataVisitList() {
      this.loading2 = true;
      let account = {
        account: this.account.account,
        beginTime: this.account.beginTime,
        endTime: this.account.endTime,
      };
      getApiVisitAccountDataVisit(account)
        .then((res) => {
          if (res && res.code === 200) {
            if (res.data.length) {
              this.dataset1.dataset.source = [res.data[0]];
              let lengths = this.dataset1.dataset.source.length;
              if (lengths >= 0 && lengths <= 10) {
                this.dataset1.xAxis.axisLabel.interval = 0;
              } else if (lengths >= 11 && lengths <= 18) {
                this.dataset1.xAxis.axisLabel.interval = 1;
              } else {
                this.dataset1.xAxis.axisLabel.interval = 2;
              }
            }
          } else {
            this.dataset1.source = [];
          }
        })
        .finally(() => {
          this.loading2 = false;
        });
    },
    //访问IP分布
    orgLigetApiVisitAccountDataIpstList() {
      this.loading4 = true;
      let account = {
        account: this.account.account,
        beginTime: this.account.beginTime,
        endTime: this.account.endTime,
      };
      orgLigetApiVisitAccountDataIpst(account)
        .then((res) => {
          if (res && res.code === 200) {
            this.dataset3.source = res.data;
            this.dataset3.option.xAxis.data = res.data.reduce((r, c) => {
              r.push(c.visitIp);
              return r;
            }, []);
          } else {
          }
        })
        .finally(() => {
          this.loading4 = false;
        });
    },
    // 访问轨迹
    getApiVisitAccountDetailList() {
      this.loading5 = true;
      let account = {
        account: this.account.account,
        beginTime: this.account.beginTime,
        endTime: this.account.endTime,
        pageSize: 10,
        pageNum: 1,
      };
      getApiVisitAccountDetail(account)
        .then((res) => {
          if (res && res.code === 200) {
            this.timelist = res.data.reduce((r, c) => {
              r.push({
                time: c.visitTime,
                value: [
                  { label: "IP", value: c.visitIp, width: "15%" },
                  { label: "应用", value: c.appName, width: "15%" },
                  { label: "接口", value: c.apiUrl, width: "50%" },
                  {
                    label: "访问状态",
                    value: c.statusCode,
                    color: "#fd0000",
                    width: "10%",
                  },
                  {
                    label: "访问涉敏类型",
                    value: c.sensitiveNum,
                    color: "#fd0000",
                    width: "10%",
                  },
                ],
              });
              return r;
            }, []);
          } else {
            this.timelist = [];
          }
        })
        .finally(() => {
          this.loading5 = false;
        });
    },
    getApiVisitAccountStaticList() {
      return new Promise((resolve, reject) => {
        let account = {
          account: this.account.account,
          beginTime: this.account.beginTime,
          endTime: this.account.endTime,
        };
        getApiVisitAccountStatic(account).then((res) => {
          if (res && res.code === 200) {
            resolve(res);
          } else {
            this.list = [];
            this.dataset2.source = [];
            reject();
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.execution-history-overview-wrap {
  width: 100%;
  overflow-y: scroll;
  height: 100%;
  background-color: #eee;
  .chart-container {
    height: 400px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
    border-radius: 4px;
  }
  .grid-column-2 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .chart-container-1 {
    height: 150px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
    border-radius: 4px;
    .user-info {
      width: 100%;
      padding: 18px 36px;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      .user-info-public-1 {
        width: 60%;
        display: flex;
        .user-info-img {
          min-width: 60px;
          height: 60px;
          overflow: hidden;
          border-radius: 50%;
        }
        .user-info-data-1 {
          width: calc(100% - 60px);
          margin-left: 18px;
          display: flex;
          flex-direction: column;
          .user-info-data-name {
            height: 24px;
            font-size: 24px;
            color: #111;
          }
          .user-info-data-time {
            margin-top: 10px;
            font-size: 12px;
            color: #606166;
          }
        }
        .user-info-data-2 {
          margin-top: 12px;
          display: flex;
          flex-direction: column;
          .user-info-data-div {
            display: flex;
            padding: 2px 0;
            .user-info-data-form {
              font-size: 14px;
              min-width: 300px;
              color: #606166;
            }
          }
        }
      }
      .user-info-public-2 {
        background: #fff;
        width: 40%;
        display: flex;
        flex-direction: column;
        padding-left: 12px;
        .user-info-exceptions {
          display: flex;
          justify-content: space-between;
          line-height: 40px;
          cursor: pointer;
        }
        .test-border-line {
          height: 1px;
          background-image: linear-gradient(
            to right,
            #aaa 0%,
            #aaa 50%,
            transparent 0%
          );
          background-size: 14px 1px;
          background-repeat: repeat-x;
        }
        .user-info-num-border {
          margin: auto 35px;
          height: 40px;
          border-left: 1px solid #ddd;
        }
        .user-info-nums {
          margin-top: 12px;
          display: flex;
          overflow: hidden;

          .user-info-num {
            display: flex;
            flex-direction: column;
            width: 25%;
            cursor: pointer;
            .user-info-num-num {
              line-height: 48px;
              white-space: nowrap;
              font-size: 24px;
            }
            .user-info-num-title {
              color: #606166;
              font-size: 14px;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
  .chart-container-2 {
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
    border-radius: 4px;
  }

  .column-divided {
    height: 12px;
    width: 100%;
  }
}
.chart-inside-wrap {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
  border-radius: 5px;
}

.chart-tooltip {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0.5;

  .icon-wushuju {
    font-size: 36px;
  }

  .tip-content {
    font-size: 12px;
  }
}
</style>
